<template>
    <!-- 详情页面的顶部导航 -->
    <van-nav-bar title="详情" left-text="返回" left-arrow @click-left="$router.go(-1)">
        <template #right>
            <van-popover v-model:show="showPopover" @select="onSelect" theme="dark" placement="bottom-end"
                :actions="actions">
                <template #reference>
                    <van-icon name="ellipsis" size="34" />
                </template>
            </van-popover>
        </template>
    </van-nav-bar>
    <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelects" />
</template>
<script lang='ts' setup>
import { ref } from 'vue';
import router from '@/router';
import { Toast } from 'vant';
let showPopover = ref(false);    // 是否显示气泡弹出框
const actions = [       // 气泡弹出框展示的内容
    { text: '首页', icon: 'wap-home-o' },
    { text: '购物车', icon: 'shopping-cart-o' },
    { text: '分享', icon: 'share-o' },
];
let showShare = ref(false);    // 是否显示分享面板
    const options = [
      { name: '微信', icon: 'wechat' },
      { name: '微博', icon: 'weibo' },
      { name: '复制链接', icon: 'link' },
      { name: '分享海报', icon: 'poster' },
      { name: '二维码', icon: 'qrcode' },
    ];
const onSelect = (action: {}, index: number) => {
    // console.log(action, index);
    if (index == 0) {
        router.push('/home')
    } else if (index == 1) {
        router.push('/cart')
    } else {
        showShare.value = true
    }
}
const onSelects=(option:{name:string,icon:string})=>{
    // console.log(option);
    Toast(option.name);
    showShare.value = false;
    
}

</script>
<style scoped>

</style>
